<template>
  <button
    :class="{
      'pui-btn': true,
      'without-icon': !icon,
      'default': type === 'default',
      'primary': type === 'primary',
      'success': type === 'success',
      'info': type === 'info',
      'warning': type === 'warning',
      'danger': type === 'danger',
      'text': type === 'text',
      'small': size === 'small',
      'large': size === 'large',
      'block': display === 'block',
      'icon': icon,
      'plain': plain && type && type !== 'default',
      'round': round,
      'circle': circle,
      'disabled': disabled,
    }"
    :disabled="disabled"
  >
    <pui-icon :size="size" :name="icon" v-if="icon && iconPosition === 'left'" />
    <slot v-if="$slots.default || icon"></slot>
    <pui-icon :size="size" :name="icon" v-if="icon && iconPosition === 'right'" />
  </button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'puiButton',
});
</script>

<script lang="ts" setup>
import type { Props } from './interface';
withDefaults(defineProps<Props>(), {
  type: 'default',
  size: 'normal',
  display: 'inline',
  plain: false,
  iconPosition: 'left',
  round: false,
  circle: false,
  disabled: false,
});
</script>
